<template>
  <van-overlay
    :show="isShowPoups"
    class="w-full"
    :lock-scroll="false"
    z-index="100"
  >
    <div
      class="m-auto text-white rounded-xl max-w-[500px] flex flex-col justify-center shadow-lg w-full text-center"
    >
      <div
        class="actvieBgc"
        :style="{
          backgroundImage: `url(${avtivePopup.static_base_url}${actvieDetil?.img_url})`
        }"
        @click="getActiveDetil"
      ></div>
      <div
        class="cursor-pointer text-3xl text-white clone_box"
        @click="isShowPoups = false"
      >
        ×
      </div>
    </div>
  </van-overlay>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { getActiveCasinoPopup } from "@/api/active.js";
import { mainAct } from "@/store/activeda.js";
import { eventBus } from "@/utils/eventBus";

const avtivePopup = mainAct();
const isShowPoups = ref(false);
let actvieDetil = reactive({});
const getAcvtive = () => {
  getActiveCasinoPopup().then(res => {
    if (res.errno == 0) {
      actvieDetil = res.data.info;
      if (res.data.info.id) {
        isShowPoups.value = true;
        // document.body.style.overflow = "hidden";
      }
    }
  });
};

eventBus.on("showActiveProp", () => {
  getAcvtive();
});

const emit = defineEmits(["getActiveDetil"]);
const getActiveDetil = () => {
  isShowPoups.value = false;
  // document.body.style.overflow = "";
  emit("getActiveDetil", actvieDetil);
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.van-overlay {
  display: flex;
}

.actvieBgc {
  width: 500px;
  height: 500px;
  background-size: cover; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}

@media (max-width: 600px) {
  .actvieBgc {
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }

  .clone_box {
    width: 300px;
    margin: 0 auto;
  }
}
</style>
